<template>
    <view class="detail-container">
        <!-- 顶部导航 -->
        <view class="header">
            <view class="back-btn" @click="handleBack">
                <text class="back-icon">〈</text>
            </view>
            <view class="page-title">产品图</view>
            <view class="empty-placeholder"></view>
        </view>


        <!-- 标签切换区域（圆形边框风格） -->
        <view class="tabs-wrapper">
            <scroll-view class="tabs-scroll" scroll-x>
                <view class="tabs-container">
                    <view 
                        class="tab-item" 
                        :class="{ active: activeTab === 'grain' }" 
                        @click="activeTab = 'grain'"
                    >
                        剑纹
                    </view>
                    <view 
                        class="tab-item" 
                        :class="{ active: activeTab === 'inlay' }" 
                        @click="activeTab = 'inlay'"
                    >
                        插花
                    </view>
                    <view 
                        class="tab-item" 
                        :class="{ active: activeTab === 'nameplate' }" 
                        @click="activeTab = 'nameplate'"
                    >
                        铭牌
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 细节图展示区域 -->
        <view class="images-container">
            <!-- 剑纹图片 -->
            <view v-if="activeTab === 'grain'" class="detail-images">
                <view v-for="(img, idx) in currentCue.detailImages.grain" :key="idx" class="image-item">
                    <image 
                        :src="img" 
                        class="detail-img" 
                        mode="widthFix"
                    ></image>
                </view>
            </view>

            <!-- 插花图片 -->
            <view v-if="activeTab === 'inlay'" class="detail-images">
                <view v-for="(img, idx) in currentCue.detailImages.inlay" :key="idx" class="image-item">
                    <image 
                        :src="img" 
                        class="detail-img" 
                        mode="widthFix"
                    ></image>
                </view>
            </view>

            <!-- 铭牌图片 -->
            <view v-if="activeTab === 'nameplate'" class="detail-images">
                <view v-for="(img, idx) in currentCue.detailImages.nameplate" :key="idx" class="image-item">
                    <image 
                        :src="img" 
                        class="detail-img" 
                        mode="widthFix"
                    ></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'grain',
            currentCue: {
                id: 1,
                name: '斯诺克专业杆',
                detailImages: {
                    grain: [
                        'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg',
                        'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg',
                    ],
                    inlay: [
                        'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg',
                        'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg',
                    ],
                    nameplate: [
                        'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/187e45af90dee94208b507d7b17efdd62f%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250418043534.jpg',
                    ]
                }
            }
        };
    },

    onLoad(options) {
        console.log('当前球杆id:', options.id);
    },

    methods: {
        handleBack() {
            uni.navigateBack();
        }
    }
};
</script>

<style>
/* 整体黑色背景 */
.detail-container {
    position: relative;
    min-height: 100vh;
    background-color: #000; /* 全黑背景 */
    padding-top: 120rpx;
    padding-bottom: 30rpx;
    box-sizing: border-box;
}

/* 顶部导航 */
.header {
    position: fixed;
    top: 60rpx;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #000; /* 黑色导航栏 */
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
}

.back-btn {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* 白色文字 */
    font-size: 40rpx;
}

.page-title {
    flex: 1;
    text-align: center;
    color: #fff; /* 白色标题 */
    font-size: 36rpx;
    font-weight: bold;
}

.empty-placeholder {
    width: 80rpx;
}

/* 标签切换区域 - 关键调整：增加顶部间距 */
.tabs-wrapper {
    background-color: #000; /* 黑色背景 */
    padding: 40rpx 20rpx 20rpx; /* 顶部增加40rpx间距，让标签行下移 */
    margin-top: 20rpx; /* 额外增加与上方元素的距离 */
}

.tabs-scroll {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10rpx 0;
}

.tabs-container {
    display: inline-flex;
    gap: 15rpx; /* 标签之间的间距 */
}

/* 圆形边框标签样式 */
.tab-item {
    padding: 0 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #fff; /* 白色文字 */
    background-color: #222; /* 标签默认背景 */
    border: 1rpx solid #444; /* 标签边框 */
    border-radius: 20rpx; /* 圆角边框 */
    margin: 0 5rpx;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 选中标签样式（背景加深） */
.tab-item.active {
    background-color: #444; /* 选中时背景加深 */
    border-color: #666; /* 选中时边框颜色变亮 */
    color: #fff;
    font-weight: bold;
}

/* 图片展示区域 */
.images-container {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
}

.detail-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.image-item {
    width: calc((100% - 20rpx) / 2);
}

.detail-img {
    width: 100%;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 15rpx rgba(255, 255, 255, 0.1); /* 白色阴影适配黑色背景 */
}

/* 隐藏滚动条 */
.tabs-scroll::-webkit-scrollbar {
    display: none;
}
</style>